<!-- 博客详情页面 -->

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  View,
  Share,
  Star,
  ChatDotRound,
  ArrowLeft,
  Pointer as ThumbsUp,
  WarningFilled as ThumbsDown
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 文章数据
const article = ref({
  id: route.params.id,
  title: '人工智能发展新突破：ChatGPT-4展现惊人能力',
  author: '科技日报',
  authorAvatar: 'https://picsum.photos/100/100',
  authorDesc: '科技新闻领域资深记者，关注AI、区块链等前沿技术',
  publishTime: '2024-01-20 10:30',
  readCount: '12.5万',
  content: `
    <h2>引言</h2>
    <p>随着人工智能技术的不断发展，ChatGPT-4在多个领域展现出了惊人的能力...</p>
    <h2>主要突破</h2>
    <p>1. 自然语言处理能力大幅提升</p>
    <p>2. 多模态理解能力显著增强</p>
    <p>3. 推理能力达到新高度</p>
    <img src="https://picsum.photos/800/400" alt="AI示意图">
    <p>专家表示，这些突破性进展将为未来AI应用带来革命性变化...</p>
  `,
  tags: ['AI', '科技', '人工智能'],
  likes: 2345,
  dislikes: 123,
  comments: 389,
  favorites: 156,
  authorStats: {
    articles: 128,
    followers: '12.5万',
    likes: '45.8万'
  }
})

// 相关推荐
const relatedArticles = ref([
  {
    id: 1,
    title: 'AI在医疗领域的最新应用',
    image: 'https://picsum.photos/200/150?random=1',
    readCount: '8.2万'
  },
  {
    id: 2,
    title: '未来十年AI发展趋势预测',
    image: 'https://picsum.photos/200/150?random=2',
    readCount: '6.5万'
  }
])

// 评论列表
const comments = ref([
  {
    id: 1,
    author: '用户A',
    avatar: 'https://picsum.photos/50/50?random=1',
    content: '这篇文章写得很好，观点很独到！',
    time: '2小时前',
    likes: 15,
    replies: [
      {
        id: 11,
        author: '用户B',
        avatar: 'https://picsum.photos/50/50?random=2',
        content: '完全同意你的看法',
        time: '1小时前',
        likes: 5
      }
    ]
  },
  {
    id: 2,
    author: '用户C',
    avatar: 'https://picsum.photos/50/50?random=3',
    content: '期待后续的分析和讨论',
    time: '3小时前',
    likes: 8,
    replies: []
  }
])

// 评论内容
const commentContent = ref('')

// 互动功能
const handleLike = () => {
  console.log('点赞')
}

const handleDislike = () => {
  console.log('点踩')
}

const handleComment = () => {
  console.log('评论')
}

const handleFavorite = () => {
  console.log('收藏')
}

const handleShare = () => {
  console.log('分享')
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 发表评论
const submitComment = () => {
  if (!commentContent.value.trim()) return

  comments.value.unshift({
    id: Date.now(),
    author: '当前用户',
    avatar: 'https://picsum.photos/50/50?random=999',
    content: commentContent.value,
    time: '刚刚',
    likes: 0,
    replies: []
  })

  commentContent.value = ''
}

// 点赞评论
const likeComment = (comment: any) => {
  comment.likes++
}
</script>

<template>
  <div class="max-w-6xl mx-auto px-4 py-8">
    <!-- 返回按钮 -->
    <div class="mb-6">
      <el-button
        class="!px-3"
        @click="goBack"
      >
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
    </div>

    <div class="flex gap-8">
      <!-- 左侧互动工具栏 -->
      <div class="w-16">
        <div class="sticky top-24 space-y-6">
          <div
            v-for="(item, index) in [
              {
                icon: ThumbsUp,
                label: '点赞',
                value: article.likes,
                handler: handleLike
              },
              {
                icon: ThumbsDown,
                label: '点踩',
                value: article.dislikes,
                handler: handleDislike
              },
              {
                icon: ChatDotRound,
                label: '评论',
                value: article.comments,
                handler: handleComment
              },
              {
                icon: Star,
                label: '收藏',
                value: article.favorites,
                handler: handleFavorite
              },
              { icon: Share, label: '分享', value: '', handler: handleShare }
            ]"
            :key="index"
            class="flex flex-col items-center cursor-pointer hover:text-red-500"
            @click="item.handler"
          >
            <el-icon :size="24"><component :is="item.icon" /></el-icon>
            <span class="text-sm mt-1">{{ item.label }}</span>
            <span
              v-if="item.value"
              class="text-sm text-gray-500"
              >{{ item.value }}</span
            >
          </div>
        </div>
      </div>

      <!-- 中间内容区域 -->
      <div class="flex-1">
        <!-- 文章内容 -->
        <div class="bg-white rounded-lg p-8 mb-8">
          <h1 class="text-3xl font-bold mb-4">{{ article.title }}</h1>
          <div class="flex items-center text-gray-500 text-sm mb-8">
            <span>{{ article.publishTime }}</span>
            <span class="mx-2">·</span>
            <span class="flex items-center">
              <el-icon class="mr-1"><View /></el-icon>
              {{ article.readCount }}
            </span>
            <div class="ml-4 flex gap-2">
              <el-tag
                v-for="tag in article.tags"
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>

          <div
            class="article-content prose prose-lg max-w-none"
            v-html="article.content"
          ></div>
        </div>

        <!-- 评论区 -->
        <div class="bg-white rounded-lg p-8">
          <h2 class="text-xl font-bold mb-6">评论 {{ comments.length }}</h2>

          <!-- 评论输入框 -->
          <div class="mb-8">
            <el-input
              v-model="commentContent"
              type="textarea"
              :rows="3"
              placeholder="写下你的评论..."
              class="mb-4"
            />
            <div class="text-right">
              <el-button
                type="primary"
                @click="submitComment"
                >发表评论</el-button
              >
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="space-y-6">
            <div
              v-for="comment in comments"
              :key="comment.id"
              class="border-b border-gray-100 pb-6 last:border-none"
            >
              <!-- 主评论 -->
              <div class="flex gap-4">
                <el-avatar
                  :size="40"
                  :src="comment.avatar"
                />
                <div class="flex-1">
                  <div class="flex items-center justify-between mb-2">
                    <span class="font-bold">{{ comment.author }}</span>
                    <span class="text-gray-500 text-sm">{{
                      comment.time
                    }}</span>
                  </div>
                  <p class="text-gray-700 mb-2">{{ comment.content }}</p>
                  <div class="flex items-center gap-4 text-gray-500 text-sm">
                    <button
                      class="flex items-center gap-1 hover:text-blue-500"
                      @click="likeComment(comment)"
                    >
                      <el-icon><ThumbsUp /></el-icon>
                      <span>{{ comment.likes }}</span>
                    </button>
                    <button class="hover:text-blue-500">回复</button>
                  </div>
                </div>
              </div>

              <!-- 回复列表 -->
              <div
                v-if="comment.replies.length"
                class="ml-14 mt-4 space-y-4 bg-gray-50 p-4 rounded-lg"
              >
                <div
                  v-for="reply in comment.replies"
                  :key="reply.id"
                  class="flex gap-4"
                >
                  <el-avatar
                    :size="32"
                    :src="reply.avatar"
                  />
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-2">
                      <span class="font-bold">{{ reply.author }}</span>
                      <span class="text-gray-500 text-sm">{{
                        reply.time
                      }}</span>
                    </div>
                    <p class="text-gray-700 mb-2">{{ reply.content }}</p>
                    <div class="flex items-center gap-4 text-gray-500 text-sm">
                      <button
                        class="flex items-center gap-1 hover:text-blue-500"
                        @click="likeComment(reply)"
                      >
                        <el-icon><ThumbsUp /></el-icon>
                        <span>{{ reply.likes }}</span>
                      </button>
                      <button class="hover:text-blue-500">回复</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧信息 -->
      <div class="w-72">
        <!-- 作者信息卡片 -->
        <div class="bg-white rounded-lg p-6 mb-6">
          <div class="flex items-center mb-4">
            <el-avatar
              :size="48"
              :src="article.authorAvatar"
            />
            <div class="ml-3">
              <div class="font-bold">{{ article.author }}</div>
              <div class="text-sm text-gray-500">{{ article.authorDesc }}</div>
            </div>
          </div>
          <div class="flex justify-around text-center mb-4">
            <div>
              <div class="font-bold">{{ article.authorStats.articles }}</div>
              <div class="text-sm text-gray-500">文章</div>
            </div>
            <div>
              <div class="font-bold">{{ article.authorStats.followers }}</div>
              <div class="text-sm text-gray-500">粉丝</div>
            </div>
            <div>
              <div class="font-bold">{{ article.authorStats.likes }}</div>
              <div class="text-sm text-gray-500">获赞</div>
            </div>
          </div>
          <el-button
            type="primary"
            class="w-full"
            >关注</el-button
          >
        </div>

        <!-- 相关推荐 -->
        <div class="bg-white rounded-lg p-6">
          <h3 class="font-bold mb-4">相关推荐</h3>
          <div class="space-y-4">
            <div
              v-for="item in relatedArticles"
              :key="item.id"
              class="cursor-pointer hover:bg-gray-50 p-2 rounded"
            >
              <div
                class="text-base font-bold mb-2 line-clamp-2 hover:text-blue-500"
              >
                {{ item.title }}
              </div>
              <div class="text-gray-500 text-sm flex items-center gap-1">
                <el-icon><View /></el-icon>
                {{ item.readCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.article-content {
  :deep(img) {
    @apply my-4 rounded-lg w-full;
  }
  :deep(h2) {
    @apply text-2xl font-bold my-4;
  }
  :deep(p) {
    @apply my-4 leading-relaxed text-gray-700;
  }
}
</style>
